<template>
  <div class="headline-box" v-if="showNewsList.length > 0" >
    <div class="news acea-row row-between-wrapper">
      <div class="pictrue">
		<img :src="config.iconUrl" alt="" />
      </div>
      <div class="swiper-no-swiping new-banner swiper_view">
        <swiper class="swiper-wrapper" v-if="showNewsList.length > 0" :indicator-dots="false"  autoplay circular vertical>
          <block v-for="item in showNewsList" :key="item.id">
            <swiper-item class="swiper-slide">
				<div class="line1 newsTitle">{{ item.info }}</div>
              <!-- <div class="swiper-item acea-row row-between-wrapper">
                <div class="text acea-row row-between-wrapper">
                  
                </div>
              </div> -->
            </swiper-item>
          </block>
        </swiper>
      </div>
    </div>


    <!-- <span class="icon-box">
      <image mode="heightFix" :src="config.iconUrl" alt="" />
    </span>
    <div v-for="item in showNewsList" :key="item.id">
      <span class="text-box">{{item.title}}</span>
    </div> -->
  </div>
</template>

<script>
import { getIndexRollNews } from "@/api/public";
export default {
  name: "headline",
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      newsList: [
		// {id:1,info:'上山打老虎'},
		// {id:2,info:'北冥有鱼'},
		{id:3,info:'日不落日不落日不落日不落日不落日不落日不落日不落'}
	  ]
    };
  },
  mounted() {
    // this.getData();
  },
  methods: {
    getData() {
      getIndexRollNews({ limit: this.config.count }).then(res => {
        if (res.status == 200) {
          this.newsList = res.data;
        }
      });
    }
  },
  computed: {
    showNewsList() {
      return this.newsList.slice(0, this.config.count);
    }
  }
};
</script>

<style scoped>
.pictrue{
	display:flex;
	align-item:center;
	justify-content:space-between;
}
.pictrue img{
  /* width: 65px;
  height: 20px; */
  width:32rpx;
  height:32rpx;
}
.swiper-wrapper{
  height: 20px;
  width: 300px;
  margin-left: 10px;
}
.swiper_view{
 /* background: rgb(240, 240, 240); */
  border-radius: 10rpx;
  margin-left: 20rpx;
}
.headline-box {
  height: 40px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  background: #ffffff;
}
.icon-box image {
  /* width: 40rpx; */
  height: 40rpx;
}
.text-box {
  margin-left: 6px;
  width: 260px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.newsTitle{
	line-height:40rpx;
	font-weight:normal;
}
.newsTitle{
	height:40rpx;
}
.swiper-item{
	width:750rpx;
}
.new{
	diplay:flex;
	align-item:center;
}
</style>
